<template>
  <div class="alarm-statistics">
    <div class="title">报警威胁</div>
    
    <!-- 报警类型统计 -->
    <div class="statistics-section">
      <h3>报警类型统计</h3>
      <div class="chart-container" ref="pieChart"></div>
    </div>
    
    <!-- 报警次数时段统计 -->
    <div class="statistics-section">
      <h3>报警次数时段统计</h3>
      <div class="time-filter">
        <span :class="{ active: timeUnit === 'year' }" @click="timeUnit = 'year'">年</span>
        <span :class="{ active: timeUnit === 'month' }" @click="timeUnit = 'month'">月</span>
        <span :class="{ active: timeUnit === 'day' }" @click="timeUnit = 'day'">日</span>
      </div>
      <div class="chart-container" ref="barChart"></div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'AlarmStatistics',
  setup() {
    const pieChart = ref(null)
    const barChart = ref(null)
    const timeUnit = ref('year')
    let pieChartInstance = null
    let barChartInstance = null

    const pieChartData = [
      { value: 1200, name: 'SOS呼救', percentage: '61.57%' },
      { value: 400, name: '欺诈告警', percentage: '63.25%' },
      { value: 350, name: '静止告警', percentage: '52.95%' }
    ]

    const barChartData = {
      years: ['2023', '2024', '2025'],
      data: {
        'SOS呼救': [60, 75, 45],
        '欺诈告警': [15, 20, 10],
        '静止告警': [15, 0, 0],
        '撞击报警': [0, 0, 0]
      }
    }

    const initPieChart = () => {
      if (pieChartInstance) {
        pieChartInstance.dispose()
      }
      
      pieChartInstance = echarts.init(pieChart.value)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: pieChartData
        }]
      }
      pieChartInstance.setOption(option)
    }

    const initBarChart = () => {
      if (barChartInstance) {
        barChartInstance.dispose()
      }

      barChartInstance = echarts.init(barChart.value)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['SOS呼救', '欺诈告警', '静止告警', '撞击报警'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: barChartData.years,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }
        },
        series: Object.keys(barChartData.data).map(key => ({
          name: key,
          type: 'bar',
          data: barChartData.data[key]
        }))
      }
      barChartInstance.setOption(option)
    }

    onMounted(() => {
      initPieChart()
      initBarChart()
      
      window.addEventListener('resize', () => {
        pieChartInstance?.resize()
        barChartInstance?.resize()
      })
    })

    watch(timeUnit, () => {
      // 这里可以根据时间单位切换来更新图表数据
      initBarChart()
    })

    return {
      pieChart,
      barChart,
      timeUnit
    }
  }
}
</script>

<style scoped>
.alarm-statistics {
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 8px;
  color: white;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.statistics-section {
  margin-bottom: 30px;
}

.statistics-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.time-filter {
  margin-bottom: 15px;
}

.time-filter span {
  display: inline-block;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #30363d;
  border-radius: 4px;
}

.time-filter span.active {
  background: #1890ff;
  border-color: #1890ff;
}
</style> 